
<template>
    <a-row>
        <a-col :span="24" class="content-container" :style="`height: ${viewHeight}px`">
            <a-row>
                <a-col :span="24">
                    <div class="map-container" :style="`height: ${viewHeight - 30}px;position:relative`">
                        <normalMap :geoserverURL="geoserverURL" v-if="currentTaskType == '500' || currentTaskType == '400'"
                            :currentRow="currentRow" ref="normalMapRef">
                        </normalMap>
                        <changeMap :geoserverURL="geoserverURL" v-if="currentTaskType == '300'"
                            :changeMapName="changeMapName" :currentRow="currentRow" ref="changeMapRef">
                        </changeMap>
                        <targetMap :geoserverURL="geoserverURL"
                            v-if="currentTaskType == '600' || currentTaskType == '700' || currentTaskType == '900'"
                            :currentRow="currentRow" :changeMapName="changeMapName" ref="TargetMapRef">
                        </targetMap>
                        <div class="opeartion-card">
                            <div class="tiny-menu-con">
                                <span style=" font-weight: 600;">
                                    土壤含水量与蒸散发协同反演子模块
                                </span>
                                <span v-show="!showCard" class="operation" @click="showCard = true">展开</span>
                                <span v-show="showCard" class="operation" @click="showCard = false">收起</span>
                            </div>
                            <div class="card-body" v-show="showCard">
                                <div class="filter-condition">
                                    <el-row>
                                        <el-col :span="19">
                                            <el-date-picker v-model="date" style="width:100% " type="daterange"
                                                range-separator="To" start-placeholder="开始日期" end-placeholder="结束日期"
                                                :size="'small'">
                                            </el-date-picker>
                                        </el-col>
                                        <el-col :span="5" style="text-align: right;">
                                            <el-button :size="'small'" style="width:calc(100% - 5px) "
                                                @click="searchClickHandler">
                                                搜索
                                            </el-button>
                                        </el-col>
                                    </el-row>
                                </div>
                                <el-card class="type-card">
                                    <div v-for="(item, index) in taskGroup" :key="index">
                                        <el-row>
                                            <el-col :span="24" style="text-align: left; padding-bottom: 2px;">
                                                <span class="result-type"> {{ item.groupAlias }}</span>
                                            </el-col>
                                        </el-row>
                                        <el-radio-group text-color="#13c2c2" fill="#13c2c2" v-model="currentTask"
                                            size="small" @change="resultTypeChangeHandler()" style="width:100%">
                                            <el-radio :label="task" v-for="(task, id) in item.tasks" :key="id"
                                                :border="true">{{ task.taskname }}
                                            </el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-card>
                                <el-table ref="singleTableRef" :data="tableData" highlight-current-row
                                    style="width: 100%;margin-top: 5px;" @current-change="handleCurrentChange" height="200"
                                    size="small" :border="true" v-loading="tableLoading">
                                    <el-table-column type="index" :align="'center'" width="50" />
                                    <el-table-column property="name" :align="'center'" label="灌溉轮数" width="80">
                                        <template #default="{ row }">
                                            第 {{ row.productindex }} 轮
                                        </template>
                                    </el-table-column>
                                    <el-table-column property="producttm" :align="'center'" label="日期">
                                        <template #default="{ row }">
                                            {{ row.producttm }}
                                        </template></el-table-column>
                                    <el-table-column :align="'center'" width="50">
                                        <template #default="{ row }">
                                            <el-icon color="#fff"
                                                v-if="currentTaskType == '500' || currentTaskType == '400' || currentTaskType == '300'"
                                                style="cursor: pointer;" @click="showMapCardHandler">
                                                <View />
                                            </el-icon>
                                            <span v-if="currentTaskType == '600'">
                                                —
                                            </span>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="kinds-container" v-show="false">
                            <div class="tiny-menu-con">
                                <span style=" font-weight: 600;">
                                    图例信息
                                </span>
                                <span v-show="!showCard2" class="operation" @click="showCard2 = true">展开</span>
                                <span v-show="showCard2" class="operation" @click="showCard2 = false">关闭</span>
                            </div>
                            <div class="card-body" v-show="showCard2">
                                <el-table v-if="currentTaskType == '500'" :data="tableData2" style="width: 100%"
                                    v-loading="kindsLoading" size="small">
                                    <el-table-column property="type" label="类型" :align="'center'" />
                                    <el-table-column property="area" :align="'center'" width="100" label="面积（km²）" />
                                    <el-table-column property="color" label="颜色" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex;justify-content:center">
                                                <div :style="`background:${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>

                                <el-table v-if="currentTask.code == '401' && showCard2" :data="tableData2"
                                    style="width: 100%" v-loading="kindsLoading" size="small">
                                    <el-table-column property="area" label="植被盖度检测" :align="'center'" width="100" />
                                    <el-table-column property="color" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex;justify-content:center">
                                                <div :style="`background:${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-table v-if="currentTask.code == '403' && showCard2" :data="tableData2"
                                    style="width: 100%" v-loading="kindsLoading" size="small">
                                    <el-table-column property="area" label="生物量 (g/m²)" :align="'center'" width="100" />
                                    <el-table-column property="color" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex;justify-content:center">
                                                <div :style="`background:${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-table v-if="currentTask.code == '405' && showCard2" :data="tableData2"
                                    style="width: 100%" v-loading="kindsLoading" size="small">
                                    <el-table-column property="area" label="土壤含水量计算" :align="'center'" width="100" />
                                    <el-table-column property="color" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex;justify-content:center">
                                                <div :style="`background:${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-table v-if="currentTask.code == '407' && showCard2" :data="tableData2"
                                    style="width: 100%" v-loading="kindsLoading" size="small">
                                    <el-table-column property="area" label="灌溉面积识别" :align="'center'" width="100" />
                                    <el-table-column property="color" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex;justify-content:center">
                                                <div :style="`background:${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-table v-if="currentTask.code == '408' && showCard2" :data="tableData2"
                                    style="width: 100%" v-loading="kindsLoading" size="small">
                                    <el-table-column property="area" label="灌溉水量计算" :align="'center'" width="100" />
                                    <el-table-column property="color" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex;justify-content:center">
                                                <div :style="`background:${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-table v-if="currentTask.code == '409' && showCard2" :data="tableData2"
                                    style="width: 100%" v-loading="kindsLoading" size="small">
                                    <el-table-column property="area" label="种植结构" :align="'center'" width="100" />
                                    <el-table-column property="color" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex;justify-content:center">
                                                <div :style="`background:${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-table v-if="currentTaskType == '300' && showCard2" :data="tableData3"
                                    style="width: 100%" v-loading="kindsLoading" size="small">
                                    <el-table-column property="type" label="人类活动变化类型图例" :align="'center'" width="200" />
                                    <el-table-column property="color" :align="'center'">
                                        <template #default="{ row }">
                                            <div style="display: flex;justify-content:center">
                                                <div :style="`background: ${row.color};height:15px;width:15px`"></div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="chart-container" v-show="false">
                            <div class="tiny-menu-con">
                                <span style=" font-weight: 600;">
                                    面积变化统计
                                </span>
                                <span v-show="!showCard3" class="operation" @click="showCard3 = true">展开</span>
                                <span v-show="showCard3" class="operation" @click="showCard3 = false">关闭</span>
                            </div>
                            <div class="card-body" v-loading="chartLoading">
                                <el-radio-group v-model="legendType" :size="'small'">
                                    <el-radio-button :label="item.name" v-for="(item, index) in areaStatistics" :key="index"
                                        @click="changeData(item.area)" />
                                </el-radio-group>
                                <div id="chartElement"></div>
                            </div>
                        </div>
                    </div>
                </a-col>
            </a-row>
        </a-col>
    </a-row>
</template>
<script>
import { defineComponent, reactive, ref, toRefs, onMounted, watch, nextTick } from 'vue'
// import { UserOutlined, LogoutOutlined, SettingOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
// import { View } from '@element-plus/icons-vue'
import floatWindow from '@/components/floatWindow.vue'
import '@/utils/mapUtils/leaflet/leaflet.css'
import * as echarts from 'echarts';
import mock from "./mock.js"
import '@/utils/mapUtils/leaflet-side-by-side'
import "@/utils/mapUtils/src/leaflet.ChineseTmsProviders.js"
import normalMap from '@/components/mapComp/normalMap.vue'
import changeMap from '@/components/mapComp/changeMap.vue'
import targetMap from '@/components/mapComp/targetMap.vue'
import HttpService from "@/api/api";
import Utils from '@/utils/util.ts'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { getToken, setToken, removeToken } from "@/utils/auth.ts";
import {
    View
} from '@element-plus/icons-vue'
export default defineComponent({
    name: 'Template',
    props: {
        prop: {
            type: String,
            required: false,
            default: () => {
                return ''
            }
        }
    },
    emits: ['emitsHandler'],
    components: {
        // UserOutlined,
        // LogoutOutlined,
        // SettingOutlined,
        floatWindow,
        // MenuFoldOutlined,
        // View,
        normalMap,
        changeMap,
        targetMap,
    },
    setup(props, context) {
        const geoserverURL = import.meta.env.VITE_GEOSERVER_URL;
        console.log(geoserverURL)
        var myChart = null;
        var option;
        var date = new Date();
        const router = useRouter()
        const data = reactive({
            viewHeight: window.innerHeight - 30,
            date: [new Date(2004, 1, 1, 0, 0, 0), new Date(date.getFullYear(), date.getMonth(), date.getDate(), 24, 0)],
            showCard: true,  //结果查询
            showCard2: true, //图例信息
            showCard3: true, //面积变化统计
            currentTask: {},
            currentTaskType: '',
            singleTableRef: null,
            tableData: [],
            tableData2: mock.classfiyResult.results[0].legend,
            tableData3: [
                { type: '新增', color: 'rgb(255,0,0)' },
                { type: '扩大', color: 'rgb(200,0,255)' },
                { type: '减少', color: 'rgb(0,255,0)' },
            ],
            currentRow: {
                productindex: ''
            },
            tableLoading: false,
            chartLoading: false,
            kindsLoading: false,
            chartData: [],
            chartDate: [],
            legendType: '',
            areaStatistics: {},
            normalMapRef: null,
            changeMapRef: null,
            TargetMapRef: null,
            changeMapName: {
                before: '',
                after: '',
                json: ''
            },
            taskGroup: [],
            userInfo: JSON.parse(localStorage.getItem('sjy_userInfo'))
        })
        onMounted(() => {
            getTasksList()
        })

        const getTasksList = function () {
            let params = {
                id: data.currentRow.objid
            }
            HttpService.result.getTasksList(
                params,
                (res) => {
                    if (res.status == 200) {
                        data.taskGroup = []
                        res.data.data.taskGroup.forEach(item => {
                            if (item.groupCode !== '100' && item.groupCode !== '200') {
                                data.taskGroup.push(item)
                            }
                        })
                        data.currentTask = data.taskGroup[0].tasks[0]
                        data.currentTaskType = data.currentTask.type
                        searchClickHandler()
                    }
                },
                (error) => {
                    console.log(error);
                }
            )
        }
        const handleSelect = (key, keyPath) => {
            console.log(key, keyPath)
        }
        const setCurrent = (row) => {
            data.singleTableRef.setCurrentRow(row)
        }
        const handleCurrentChange = function (row) {
            if (row) {
                data.currentRow = row
                nextTick(() => {
                    if (data.currentTaskType == "500" || data.currentTaskType == "400") {
                        data.tableData2 = JSON.parse(row.stcjson).legend
                        /* if (data.currentTaskType == "500") {
                            changeData(data.areaStatistics[0].area)
                        } */
                        data.normalMapRef.createMap()

                    } else {
                        data.showCard3 = false
                        getChangeMap()
                    }
                })
            }
        }
        const getChangeMap = function () {
            let params = {
                id: data.currentRow.objid
            }
            HttpService.result.getChangeMap(
                params,
                (res) => {
                    if (res.status == 200) {
                        data.changeMapName.before = res.data.data.qianurl;
                        data.changeMapName.after = res.data.data.houurl;
                        data.changeMapName.json = res.data.data.polyjson;
                        data.changeMapName.qianDate = res.data.data.qianname;
                        data.changeMapName.houDate = res.data.data.houname;
                        if (data.currentTaskType == "300") {
                            data.changeMapRef.createMap()
                        } else {
                            data.TargetMapRef.createMap()
                        }
                    }
                },
                (error) => {
                    console.log(error);
                }
            )
        }
        const showMapCardHandler = function () {
            data.showCard2 = true
            data.showCard3 = true
        }
        const createChart = function () {
            var chartDom = document.getElementById('chartElement');
            if (myChart != null && myChart != "" && myChart != undefined) {
                myChart.dispose();
            }
            myChart = echarts.init(chartDom);
            option = {
                xAxis: {
                    type: 'category',
                    data: data.chartDate,
                    name: '日期'
                },
                yAxis: {
                    type: 'value',
                    name: 'km²',
                    axisTick: {
                        inside: true
                    },
                    axisLabel: {
                        margin: 3,
                        textStyle: {
                            fontSize: 10 //更改坐标轴文字大小
                        }
                    },
                    min: function (value) {
                        return Math.floor(value.min)
                    },
                    scale: true,
                },
                tooltip: {
                    position: 'top',
                    formatter: function (params) {
                        return (params.value) + '(km²)'
                    }
                },
                series: [
                    {
                        data: data.chartData,
                        type: 'line',
                        lineStyle: {
                        }, itemStyle: {
                            normal: {
                                color: '#13c2c2'
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
        }
        const changeData = function (area) {
            data.chartData = []
            area.forEach(item => {
                data.chartData.push(item)
            })
            createChart()
        }
        const searchClickHandler = function () {
            data.tableLoading = true
            if (data.date != '' && data.date != null) {
                let params = {
                    end: Utils.formatDateDay(data.date[1]),
                    start: Utils.formatDateDay(data.date[0]),
                    type: data.currentTask.code,
                }
                HttpService.result.getResultList(
                    params,
                    (res) => {
                        if (res.status == 200) {
                            if (res.data.data.list.length !== 0) {
                                data.tableData = res.data.data.list
                                data.tableLoading = false
                                setCurrent(data.tableData[0])
                                data.areaStatistics = res.data.data.areaStatistics
                                // if (data.currentTaskType == '500') {
                                //     setChartData()
                                // }

                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: '当前日期段内无检测结果'
                                })
                                data.tableLoading = false
                            }
                        }
                    },
                    (error) => {
                        console.log(error);
                    }
                )
            } else {
                ElMessage({
                    showClose: true,
                    message: '请选择日期',
                })
                data.tableLoading = false
            }
        }
        const setChartData = function () {
            data.chartData = []
            data.areaStatistics[0].area.forEach(item => {
                data.chartData.push(item)
            })
            data.chartDate = []
            data.areaStatistics[0].year.forEach(item => {
                data.chartDate.push(item)
            })
            data.legendType = data.areaStatistics[0].name
            setTimeout(() => {
                createChart()
            }, 100)


        }
        const resultTypeChangeHandler = function () {
            data.currentTaskType = data.currentTask.type

            searchClickHandler()
        }
        const logout = function () {
            ElMessageBox.confirm(
                '确定要退出当前登录用户么?',
                '退出系统',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    router.push('/login')
                    removeToken("sjy_sys_token");
                    ElMessage({
                        type: 'success',
                        message: '退出成功',
                    })
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消退出',
                    })
                })
        }
        return {
            ...toRefs(data),
            handleSelect,
            setCurrent,
            handleCurrentChange,
            searchClickHandler,
            changeData,
            resultTypeChangeHandler,
            showMapCardHandler,
            logout,
            geoserverURL
        }
    },
})
</script>

<style lang="scss" scoped>
.flex-grow {
    flex-grow: 1;
}

.header-container {
    display: flex;
    flex-direction: row;
    height: 60px;
    background: #13c2c2;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 13px;

    .user-avatar {
        padding: 14px;
        height: 60px;
        width: 183px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;

        &:hover {
            background: hsla(0, 0%, 100%, .3);
        }
    }
}



.logo-container {
    width: 470px;
    height: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 24px;

    .logo-img {
        height: 32px;
        width: 48px;
        background: #fff;
        margin-right: 10px;

        img {
            height: 100%;
            width: 100%;
        }
    }

    h1 {
        font-weight: 600;
        color: #fff;
        font-size: 18px;
        margin-right: 20px;
    }
}

.header-right-container {
    width: 300px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .logout {
        height: 41px;
        line-height: 41px;
        padding: 0 14px;
        cursor: pointer;

        &:hover {
            background: hsla(0, 0%, 100%, .3);
        }
    }
}

.content-container {
    height: 200px;
    background: #f0f2f5;
}

.card-container {
    height: 400px;
    background: #fff;
    width: calc(100% - 20px);
    margin: 10px;
    margin-bottom: 0;
    border-radius: 12px
}

.map-container {
    width: calc(100%);
    background: #fff;
    margin-bottom: 0;
    border-radius: 12px;

    img {
        height: 100%;
        width: 100%;
    }
}

.collapse-container {
    position: absolute;
    width: 300px;
    padding: 5px;
    left: 40px;
    top: 60px;
    background: #fff;
}

.tiny-menu-con {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    width: 100%;
    background: #fff;
    margin-bottom: 5px;
}

.operation {
    cursor: pointer;
    color: #13c2c2;
    font-size: 12px;
}

.mybox-leave-active,
.mybox-enter-active {
    transition: all 1s ease;
}

.mybox-leave-active,
.mybox-enter {
    height: 0px !important;
}

.mybox-leave,
.mybox-enter-active {
    height: auto;
}

.filter-condition {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.type-card {
    margin-top: 5px;
}

.kinds-container {
    position: absolute;
    top: 60px;
    right: 30px;
    width: 300px;
    background: #fff;
    border-radius: 5px;
    padding: 5px;
    z-index: 1000
}

.chart-container {
    position: absolute;
    bottom: 0px;
    left: calc(calc(100% - 420px)/2);
    width: 420px;
    background: #fff;
    border-radius: 5px;
    padding: 5px;
    height: 240px;
    z-index: 1000
}

.card-body {
    padding: 10px;
}

#chartElement {
    width: 400px;
    height: 210px;
}

#map {
    height: 100%;
    width: 100%;
}
</style>
<style lang="scss">
.opeartion-card {
    position: absolute;
    top: 60px;
    left: 30px;
    width: 370px;
    background: #fff;
    padding: 5px;
    z-index: 10000
}

.map-container {
    .opeartion-card {
        border-radius: 5px;
    }

    .el-drawer {
        width: 500px !important;
        position: absolute;
        left: calc(calc(100% - 500px)/2) !important;
        bottom: 0
    }
}

.type-card {
    .el-radio.el-radio--small {
        width: calc(50% - 5px);
        margin: 0;
        padding: 0;
        margin-bottom: 5px;
        margin-right: 5px;

        &:nth-of-type(2n) {
            margin-right: 0;
            width: calc(50%);
        }
    }



    .el-card__body {
        padding: 5px;
    }
}

.el-table__body tr.current-row>td.el-table__cell {
    background-color: #13c2c2 !important;
    color: #fff;
}



.el-picker__popper {
    z-index: 10000 !important
}

.result-type {
    padding: 0 0 0 10px;
    font-size: 10px;
    font-weight: 600;
    position: relative;

    &::after {
        position: absolute;
        content: '';
        width: 5px;
        height: 12px;
        left: 0px;
        top: 0px;
        background: #13c2c2;
    }
}

.el-radio.is-bordered.is-checked {
    border-color: #13c2c2 !important;

    .el-radio__input.is-checked .el-radio__inner {
        border-color: #13c2c2 !important;
        background: #13c2c2 !important;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #13c2c2 !important;
    }
}

.el-radio-button__original-radio:checked+.el-radio-button__inner {
    background-color: #13c2c2 !important;
    border-color: #13c2c2 !important;
}

a[title="A JS library for interactive maps"] {
    display: none;
}
</style>